<template>
  <div class="link-item" @click="linkto">
    <i class="icon" :style="{backgroundImage:`url('${icon}')`}"></i>
    <span class="text">{{text}}</span>
    <i class="arrow" :style="{backgroundImage:`url('${arrow}')`}"></i>
  </div>
</template>

<script>
import arrow from '@/assets/icons/link-to.png'

export default {
  name: 'link-item',
  props: {
    icon: String,
    text: String,
    to: {}
  },
  data: () => ({ arrow }),
  methods: {
    linkto() {
      this.to && this.$router.push(this.to)
    }
  }
}
</script>

<style lang="stylus">
$icon-size = 20px;
$arrow-w = 14px;
$arrow-h = 24px;
$arrow-scale = 0.5;

.link-item {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px;
  padding: 14px 0;
  overflow: hidden;

  >.icon {
    width: $icon-size;
    height: $icon-size;
    margin-right: 0.5 * $icon-size;
    background: center / cover no-repeat;
  }

  >.text {
    flex: 1;
  }

  .arrow {
    width: $arrow-scale * $arrow-w;
    height: $arrow-scale * $arrow-h;
    background: center / cover no-repeat;
  }
}

.link-item::after {
  position: absolute;
  bottom: 0;
  left: 1.5 * $icon-size;
  content: '';
  width: 100%;
  height: 1px;
  background-color: $app-bgc;
}
</style>
